<template>
  <div>
    <!-- 面包屑 -->
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/user/user' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 检索区域 -->
    <!-- 新增按钮 -->
    <div class="line">
      <el-button type="primary" @click="handleAdd">新增商品</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="line">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="pid"
          label="商品编号"
          min-width="1"
        ></el-table-column>

        <el-table-column prop="pname" label="商品名称" min-width="3">
          <template slot-scope="scope">
            {{ scope.row.pname }}
          </template>
        </el-table-column>
        <el-table-column prop="marketPrice" label="原价" min-width="2">
          <template slot-scope="scope">
            {{ scope.row.marketPrice }}
          </template>
        </el-table-column>
        <el-table-column prop="shopPrice" label="现价" min-width="2">
          <template slot-scope="scope">
            {{ scope.row.shopPrice }}
          </template>
        </el-table-column>
        <el-table-column prop="image" label="图片" min-width="2">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 50px"
              :src="'http://127.0.0.1:8080/image/' + scope.row.image"
           
            ></el-image>
            <!-- <img :src="'http://127.0.0.1:8080/image/'+scope.row.image"/> -->
          </template>
        </el-table-column>
        <el-table-column prop="isHot" label="是否热门" min-width="2">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isHot == 1" type="danger">热门商品</el-tag>
            <el-tag v-else>冷门商品</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="3">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页区域 -->
    <div class="line pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 新增或者修改弹框 -->
    <GoodsAddOrEdit :title="title" 
    :dialogVisible="dialogVisible"
    :isAdd="isAdd"
    @handlerCloseDialog="handlerCloseDialog"
    ref="goodsAddOrEdit"></GoodsAddOrEdit>
  </div>
</template>

<script>
import { queryProductByPage,deleteProductById } from "@/api/productApi.js";
import { load } from "@/utils/tools.js";
import GoodsAddOrEdit from "./GoodsAddOrEdit.vue"

export default {
  data() {
    return {
      loading: false,
      pageNum: 1,
      pageSize: 5,
      total: 0,
      title:"",
      isAdd:false,
      dialogVisible:false,
      tableData: [],
    };
  },
  mounted() {
    this.loadData();
  },
  components:{
    GoodsAddOrEdit
  },
  methods: {
    /**
     * 获取表格数据
     */
    async loadData() {
      try {
        const { pageNum, pageSize } = this;
        this.loading = true;
        await load();
        const result = await queryProductByPage({ pageNum, pageSize });

        if (result.status == 200) {
          this.tableData = result.data.list;
          this.total = result.data.total;
          this.loading = false;
        } else {
          this.$message.error(result.msg);
          this.loading = false;
        }
      } catch (err) {
        this.loading = false;
        this.$message.error(err.message);
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.loadData();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.loadData();
    },
    /**
     * 新增弹窗
     */
    handleAdd() {
      this.title = "新增商品";
      this.dialogVisible = true;
      this.isAdd = true;
      // 调用子组件的  toEditAndAdd 的方法
      this.$refs.goodsAddOrEdit.toEditAndAdd()
      
     

    },
    /**
     * 修改弹窗
     */
    handleEdit(index, row) {
      this.title = "修改商品";
      this.dialogVisible = true;
      this.isAdd = false;
     // console.log(index, row);
      this.$refs.goodsAddOrEdit.toEditAndAdd(row.pid)
    },
    /*
      关闭弹框
    */
    handlerCloseDialog() {
      this.dialogVisible = false;
      // 关闭刷新
      this.loadData();
    },
    handleDelete(index, row) {
    
      // console.log(index, row);
      this.$confirm(`是否确认删除商品${row.pname}`, '确认删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const result = await deleteProductById(row.pid)

          if (result.status == 200) {
            this.$message({
            type: 'success',
            message: '删除成功!',
            onClose:() => {
              this.loadData();
            }
          });
          } else {
            this.$message({
              message: "删除失败",
              type: "error",
              duration: 1000
              
            });
          }
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
  },
};
</script>

<style></style>
